<template>
  <div id="nav">
    <!-- background-color="#545c64" -->
    <el-menu
      :default-active="activeIndex"
      class="navbar"
      mode="horizontal"
      @select="handleSelect"
      background-color="#324057"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">AAA</el-menu-item>
      <el-menu-item index="2">BBB</el-menu-item>
      <el-menu-item index="3">CCC</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      activeIndex: null, // 还是不要设定初始值比较好
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      if (key == 1) {
        this.$router.push({ path: "/mall" });
        // this.$router.replace({path: "/papers"})
      } else if (key == 2) {
        this.$router.push({ path: "/2" });
      } else if (key == 3) {
        this.$router.push({ path: "/3" });
      }
    },
  },
};
</script>

<style scoped>
.navbar {
  height: 60px;
}
</style>
